<template>
    <!-- 骨架屏加载动画，loading 为 true 时显示骨架，false 时显示内容 -->
    <el-skeleton :loading="loading" animated>
        <!-- 骨架屏模板 -->
        <template #template>
            <el-skeleton-item variant="h1" style="width: 50%;" />
            <el-skeleton-item variant="p" style="width:100%" />
            <el-skeleton-item variant="p" style="width:75%" />
            <el-skeleton-item variant="p" style="width:100%" />
            <el-skeleton-item variant="p" style=" width:80%" />
            <el-skeleton-item variant="p" style="width:100%" />
            <el-skeleton-item variant="p" style=" width:95%" />
            <el-skeleton-item variant="p" style="width:100%" />
            <el-skeleton-item variant="button" style="width:100px" />
        </template>
        <!-- 正常内容显示 -->
        <template #default>
            <div class="top">
                <!-- 内容标题 -->
                <h1>{{ content.title }}</h1>
                <!-- 状态标签，颜色动态变化 -->
                <span :style="`background-color:${statusColor};`">{{ content.status }}</span>
            </div>
            <!-- 内容正文 -->
            <p style="font-size: 16px;">
                {{ content.content }}
            </p>
            <!-- 审核未通过时显示驳回原因 -->
            <p v-if="content.status === '审核未通过'" style="font-size: 16px;color: red;">驳回原因 ： {{ content.msg }}</p>
            <!-- 审核中显示通过/驳回按钮 -->
            <div v-if="content.status === '审核中'" class="button">
                <el-button type="success" plain @click="pass">通过</el-button>
                <el-button type="danger" plain @click="showReject = true">驳回</el-button>
            </div>
            <!-- 其他状态显示重新审核按钮 -->
            <div v-else class="button">
                <el-button type="primary" plain @click="anew">重新审核</el-button>
            </div>
        </template>
    </el-skeleton>

    <!-- 驳回弹窗 -->
    <el-dialog v-model="showReject" title="驳回" width="500" align-center>
        <!-- 驳回原因输入框 -->
        <ElInput type="textarea" clearable :maxlength="200" v-model="rejectContent" show-word-limit
            placeholder="请输入驳回原因" autosize />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showReject = false">取消</el-button>
                <el-button type="primary" @click="Reject">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
// 引入 vue 的响应式和计算属性
import { computed, ref } from 'vue'
// 引入 element-plus 组件
import { ElSkeleton, ElSkeletonItem, ElButton, ElDialog, ElInput } from 'element-plus'

// 加载状态
const loading = ref(false)

// 根据内容状态动态计算状态标签颜色
const statusColor = computed(() => {
    switch (content.value.status) {
        case '审核中':
            return 'orange'
        case '审核通过':
            return 'green'
        case '审核未通过':
            return 'red'
        case '已删除':
            return 'gray'
        default:
            return 'black'
    }
})

// 控制驳回弹窗显示
let showReject = ref(false)
// 驳回原因内容
let rejectContent = ref('')

// 内容数据
const content = ref({
    id: 1,
    title: '示例标题',
    content: '这是示例内容。......', // 省略长内容
    status: '审核中', // 内容状态，可为 '审核中', '审核通过', '审核未通过', '已删除'
    msg: '111' // 驳回原因
})

// 通过按钮点击事件
function pass() {
    // 这里可以添加通过审核的逻辑
}

// 确认驳回按钮点击事件
function Reject() {
    // 这里可以添加驳回逻辑
    showReject.value = false
}

// 重新审核按钮点击事件
function anew() {
    // 这里可以添加重新审核的逻辑
}
</script>

<style scoped>
/* 顶部标题和状态标签样式 */
.top {
    position: relative;
}

.top h1 {
    font-size: 20px;
    margin-bottom: 1%;
}

.top span {
    position: absolute;
    right: 1%;
    top: 1%;
    color: white;
    font-size: 14px;
    border-radius: 10px;
    padding: 2px 1%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 按钮区域样式 */
.button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>
